<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>侧边导航栏</title>
	<style>
		body {
			margin: 0;
			/* 外边距 0不用给单位 */
		}

		ul {
			list-style: none;
			/* 清除小黑圆点 */
			margin: 0;
			padding: 0;
			/* 内边距 */
		}

		.wrap {
			width: 60px;
			height: 225px;
			border: 0.5px solid;
			position: fixed;
			right: 0px;
		}

		.head {
			font-weight: bold;
			width: 60px;
			height: 40px;
			background-color: white;
			line-height: 40px;
			/* 行高=高度 垂直居中 */
			font-size: 14px;
			color: #000000;
			/* 文字颜色 白色 */
			text-align: center;
			/* 文本对齐方式 居中 */
		}

		.list:hover {
			color: tomato !important;
			background-color: silver;
		}

		.list:hover a {
			color: tomato;
		}

		.list,
		.checked {
			box-sizing: border-box;
			/* content box css3盒模型 怪异盒 */
			width: 60px;
			padding: 3px;
			margin-top: 0.5px;
			/* 上边距 */
			margin-bottom: 0.5px;
			background-color: white;
			text-align: center;
			font-size: 12px;
		}

		.list a {
			color: #71ade9;
		}

		.checked {
			background-color: silver !important;
		}

		.checked a {
			color: tomato;
		}
	</style>
</head>

<body>
	<div class="wrap">
		<ul>
			<li class="head">热门品牌</li>
			<li class="list"><a href="#m1" style="text-decoration: none;">运动户外</a></li>
			<li class="list"><a href="#m2" style="text-decoration: none;">美妆专区</a></li>
			<li class="list"><a href="#m3" style="text-decoration: none;">个人家清</a></li>
			<li class="list"><a href="#m4" style="text-decoration: none;">奢品馆</a></li>
			<li class="list"><a href="#m5" style="text-decoration: none;">手表配饰</a></li>
			<li class="list"><a href="#m6" style="text-decoration: none;">美食生鲜</a></li>
			<li class="list"><a href="#m7" style="text-decoration: none;">服饰鞋靴</a></li>
			<li class="list"><a href="#m8" style="text-decoration: none;">家居生活</a></li>
		</ul>
	</div>

	<div>
		<h2 id="m1">运动户外</h2>
		锚点
		<div style="height: 800px;"></div>
	</div>

	<body>
		<h2 id="m2">美妆专区</h2>
		锚点
		<div style="height: 800px;"></div>

		<div>
			<h2 id="m3">个人家清</h2>
			锚点
			<div style="height: 800px;"></div>
		</div>

		<div>
			<h2 id="m4">奢品馆</h2>
			锚点
			<div style="height: 800px;"></div>
		</div>

		<div>
			<h2 id="m5">手表配饰</h2>
			锚点
			<div style="height: 800px;"></div>
		</div>

		<div>
			<h2 id="m6">家居生活</h2>
			锚点
			<div style="height: 800px;"></div>
		</div>

		<div>
			<h2 id="m7">服饰鞋靴</h2>
			锚点
			<div style="height: 800px;"></div>
		</div>

		<div>
			<h2 id="m8">热门品牌</h2>
			锚点
			<div style="height: 800px;"></div>
		</div>
	</body>
	<script>
		var oli = document.querySelectorAll(".wrap li");
		// oli[1].className = "checked";
		window.onscroll = function () {
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			console.log("滚动距离" + scrollTop);
			oli.forEach((item, index) => {
				if (scrollTop >= 800 * index) {
					item.className = "checked"
				}
			})
		}
	</script>

</html>